<template>
  <view class="coupon">
    <view class="coupon-flag">
      <span v-if="coupon!.count > 1">{{ coupon!.count }}张券</span>
    </view>
    <view class="coupon-top-info" :style="{ opacity: available ? 'none' : 0.5 }">
      <view class="left">
        <span class="name">{{ coupon!.name }}</span>
        <span class="expire-time">有效期至{{ formatStringParse(coupon!.expirationTime, 'yyyy.MM.dd') }}</span>
      </view>
      <view class="right">
        <view class="threshold-amount-desc">
          <view class="amount">
            <span v-if="coupon!.expansionRule && coupon!.expansionAmount == null" class="expandable"
              >最高膨胀至{{ CouponBatch.maximumExpandable(coupon!.expansionRule!) }}</span
            >
            <span class="deduction-amount"
              ><span class="amount_symbol">￥</span>{{ coupon!.parValue + (coupon!.expansionAmount ?? 0) }}</span
            >
          </view>
          <view class="threshold">{{ coupon!.thresholdAmount ? `满${coupon!.thresholdAmount}可用` : '无门槛' }}</view>
        </view>
        <select-circle
          @click="emit('select')"
          :checked="checked"
          :multiple="coupon!.isStackable"
          v-if="selectMode && !hideSelectButton"
        />
      </view>
    </view>
    <view class="coupon-bottom-info" :style="{ alignItems: isFold ? 'center' : 'flex-start' }">
      <span class="expanded" v-if="coupon!.expansionAmount != null">已膨胀</span>
      <view class="describe" @click="toggle()">
        <view class="text" :class="{ fold: isFold }" :style="{ color: describeTextColor }">
          {{ coupon!.describe ?? '平台相关优惠券' }}
        </view>
        <view class="icon">
          <uni-icons custom-prefix="iconfont" type="icon-down" :color="describeTextColor" v-if="isFold"></uni-icons>
          <uni-icons custom-prefix="iconfont" type="icon-up" :color="describeTextColor" v-else></uni-icons>
        </view>
      </view>
      <span
        class="to-use"
        v-if="isExpand(coupon!) || !selectMode"
        @click="isExpand(coupon!) ? toExpand(coupon!) : toUse(coupon!)"
        >{{ isExpand(coupon!) ? '去膨胀' : '去使用' }}</span
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import $API from '@/api'
import { $modal } from '@/plugins'
import CouponBatch from '@/types/entity/CouponBatch'
import type { CouponCoreInfo } from '@/types/response/coupon'
import { TimeOperations } from '@/utils/TimeUtils'
import SelectCircle from '@/components/select-circle/index.vue'
import { ref } from 'vue'
const props = defineProps({
  coupon: {
    type: Object as () => CouponCoreInfo,
    require: true
  },
  defaultFold: {
    type: Boolean,
    default: true
  },
  describeTextColor: {
    type: String,
    default: '#7c7c7c'
  },
  selectMode: {
    type: Boolean,
    default: false
  },
  checked: {
    type: Boolean,
    default: false
  },
  available: {
    type: Boolean,
    default: true
  },
  hideSelectButton: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits<{
  (e: 'onExpandAfter'): void
  (e: 'select'): void
}>()

// 用于将datetime字符串重新格式化重置format
function formatStringParse(dateTimeString: string, formatTemplate: string) {
  return new TimeOperations().init(dateTimeString).formatDate(formatTemplate)
}

const isFold = ref(props.defaultFold)
function toggle() {
  isFold.value = !isFold.value
}
function isExpand(coupon: CouponCoreInfo) {
  return coupon!.expansionAmount == null && coupon!.expansionRule != null && coupon!.expansionRule != ''
}
// 膨胀优惠券
async function toExpand(coupon: CouponCoreInfo) {
  const result = await $API.coupon.expandCoupon(coupon.id)
  if (!result.success) {
    $modal.toastErrorMsg(result.message)
    return
  }
  // 触发膨胀优惠券后事件
  emit('onExpandAfter')
}
// 跳去使用
function toUse(coupon: CouponCoreInfo) {}
</script>

<style scoped lang="scss">
.coupon {
  $flag-height: 40rpx;
  $line-margin-size: 14rpx;
  $coupon-box-radius-size: 20rpx;

  position: relative;
  overflow: hidden;
  margin-bottom: 20rpx;
  padding: $flag-height + 5rpx 30rpx 30rpx;
  border-radius: $coupon-box-radius-size;
  background-color: #fff;
  box-sizing: border-box;

  .coupon-flag {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
    padding: 0 16rpx;
    font-size: $flag-height - 16rpx;
    font-weight: bold;
    color: #f3422e;
    background-color: #fee0e0;
    border-bottom-right-radius: $coupon-box-radius-size;
    line-height: $flag-height;
  }

  .coupon-top-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: $line-margin-size;
    border-bottom: 2px dashed #f2f2f2;

    %flex-column {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .left {
      @extend %flex-column;

      align-items: flex-start;

      .name {
        line-height: 50rpx;
        font-size: 33rpx;
        font-weight: bold;
      }

      .expire-time {
        margin-top: 8rpx;
        font-size: 25rpx;
        color: #545454;
        line-height: 40rpx;
      }
    }

    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .threshold-amount-desc {
        @extend %flex-column;

        align-items: flex-end;

        .amount {
          .expandable {
            margin-right: 12rpx;
            padding: 8rpx;
            font-size: 22rpx;
            border-radius: 10rpx;
            color: #ff1717;
            background-color: #fde1dd;
          }

          .deduction-amount {
            $amount-font-size: 60rpx;

            font-size: $amount-font-size;
            color: #fa4a29;

            .amount_symbol {
              font-size: $amount-font-size * 0.5;
            }
          }
        }

        .threshold {
          font-size: 25rpx;
          color: #cc624a;
        }
      }
    }
  }

  .coupon-bottom-info {
    display: flex;
    padding-top: $line-margin-size;

    .expanded {
      $expanded-color: #858688;

      margin-right: 15rpx;
      padding: 2rpx 5rpx;
      font-size: 25rpx;
      border: 1px solid $expanded-color;
      border-radius: 10rpx;
      white-space: nowrap;
      color: $expanded-color;
    }

    .describe {
      display: flex;
      align-items: flex-start;
      font-size: 23rpx;
      flex-grow: 1;

      .fold {
        overflow: hidden;
        width: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-grow: 1;
      }
    }

    .to-use {
      margin-left: 15rpx;
      padding: 8rpx 16rpx;
      font-size: 25rpx;
      border-radius: 11rpx;
      white-space: nowrap;
      color: #fff;
      background: linear-gradient(to right, #fc7413, #ff4659);
    }
  }
}
</style>
